<template>
  <div class="container">
      <!--导航栏-->
      <circle-header :leftType="'NORMAL'"></circle-header>
      <!--人员列表-->
    <div class="scroller-container" v-if="total >=1">
      <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
        <van-list
        v-model="isLoading"
        :finished="finished"
        :finished-text="(finished&&total>0) ? $t('no_more') : ''"
        loding-text="loading"
        @load="getPersonnel"
        style="padding-bottom: 56px;"
        >
        <div class="personnel-container" v-for="item in personnelList" :key="item.wcmEntId" @click="$router.push({path: `/personal/${cwnEncrypt(item.wcmEntId)}`})">
        <van-image round :src="appUrl + item.wcmUserPoto" class="personnel-img"></van-image>
          <div class="personnel-title">
              <div>
                <span style="font-size: 14px;color: #333">{{item.wcmName}}</span>
                <span v-if="item.wcmRole === 'GZLEADER'" class=" iconfont icon-guanliyuan" style="color: #00aeef"></span><!--图标-->
                <span v-if="item.wcmRole === 'MANAGER'" class="iconfont icon-guanliyuan-copy" style="color:#FB6D0E;"></span>
              </div>
            <span>{{item.wcmUserGroupName}}</span>
          </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
      </van-list>
    </van-pull-refresh>
  </div>
    <div v-if="!isLoading && total <= 0" style="height:100%;">
      <div class="box-table" style="width:100%;height:100%;">
        <div class="box-table-cell" style="text-align: center;">
          <div class="no-data">
            <img src="../../../static/images/no-data.png" alt=""/>
            <p class="color999">{{ $t("no_data") }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CircleHeader from '@/repeatComponents/circleHeader/CircleHeader';
import {Image} from 'vant';
import {cwnEncrypt, cwnDecrypt} from '@/utils/tools';
export default {
    name: 'Personnel',
    components: {
        CircleHeader,
        [Image.name]: Image
    },
    data() {
        return {
            isTop: false,
            pageNo: 1,
            circleId: this.$route.query.circleId,
            personnelList: [],
            totalPage: 1,
            isLoading: false,
            onFetching: false,
            total: 0,
            finished: false,
            isRefresh: false
        };
    },
    mounted() {
        this.getPersonnel('refresh');
    },
    methods: {
        ...{ cwnEncrypt, cwnDecrypt },
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getPersonnel('refresh');
                this.isRefresh = false;
            }, 900);
        },
        /*获取人员列表*/
        getPersonnel(option) {
            this.isLoading = true;
            this.$axios({
                methods: 'GET',
                url: `/app/api/trainee/work-circle/member/${this.circleId}`,
                params: {
                    pageNo: this.pageNo
                }
            }).then(res => {
                if (option && option === 'refresh') {
                    this.personnelList = res.data.results;
                } else {
                    if (res.data.results) {
                        this.personnelList = [...this.personnelList, ...res.data.results];
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.personnelList.length >= this.total) {
                    this.finished = true;
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
  .container{
    height: 100%;
    display: flex;
    flex-direction: column;
    .scroller-container{
      flex: 1;
      height: 100px;
      padding-top: 56px;
      .personnel-container{
        display: flex;
        width: 100%;
        height: 100px;
        background-color: #fff;
        margin-top: 1px;
        .personnel-img{
          margin: 20px 20px 20px 15px;
          width: 60px;
          height: 60px;
        }
        .personnel-title{
          margin-top: 22px;
          display: flex;
          flex-direction: column;
          >span{
            padding-top: 25px;
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
</style>
